<template>
  <el-dialog v-bind="$attrs" v-on="$listeners" width="680px" @open="open" @close="close">
    <el-form label-width="150px" ref="form" :model="dataForm" :rules="rules" v-loading="loading">
      <el-form-item  :label="$t('modules.notify.user_name')" prop="roleName" style="margin-bottom: 20px">
        <el-input maxlength="64" style="width: 400px;" show-word-limit v-model="this.user.name" disabled >
          </el-input>
      </el-form-item>
      <el-form-item :label="$t('role.permission')" prop="node">
        <el-tree ref="tree" node-key="menuId" :data="treeData" v-model="dataForm.node" :props="defaultProps">
          <template v-slot="{ node, data }">

            <div class="custom-tree-node" >
              <span class="label">{{ data.list ? $t('menu.M_' + data.menuId) : $t('func.' + node.label) }}</span>
            </div>
          </template>
        </el-tree>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
      <el-button  @click="this.$emit('update:model-value', false)">{{ $t('common.cancel') }}</el-button>
    </div>
    </template>
  </el-dialog>
</template>

<script>
import { listAllMenu, listAllFunctions } from '@/api/menu'
import { newRole, roleInfo, updateRole, getRoleMenuFunctions } from '@/api/role'
import { getUserPermission } from '@/api/user'
import { menuDataTranslate2 } from '@/utils'

export default {
  inheritAttrs: false,
  props: ['user'],
  data() {
    var validatePermission = (rule, value, callback) => {
      let checkedNodes = this.$refs.tree
        .getCheckedNodes()
        .filter((node) => !node.list)
        .map((node) => ({ menuFuncCode: node.menuId }))
      if (!checkedNodes || checkedNodes.length === 0) {
        callback(new Error(this.$t('role.permission_select_tip')))
      } else {
        callback()
      }
    }
    return {
      confirmLoading: false,
      loading: false,
      treeData: [],
      dataForm: {
        node: [],
        roleName: '',
        roleFunctionList: []
      },
      defaultProps: {
        children: 'list',
        label: 'menuTitle'
      },
      rules: {
        roleName: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'blur'
          }
        ],
        node: [
          {
            required: true,
            validator: validatePermission,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // reportMenuId() {
    //   return REPORT_MENU_ID
    // }
  },
  methods: {
    open() {
      this.getUserPermission()
    },
    getUserPermission() {
      this.loading = true
      getUserPermission(this.user.userId).then(res => {
        this.loading = false
        let platMenu = res.platformInfoList.filter(item => { return item.platCode === 'PASS' })
        if (!platMenu.length) {
          return
        }
        this.treeData = menuDataTranslate2(
          platMenu[0].menuList,
          'menuId',
          'parentMenuId'
        )
        console.log(this.treeData);
        this.initMenuFunctionTree(this.treeData, res.menuFunctionList)
      })
        .catch((e) => {
          this.loading = false
          this.$confirmError(e)
        })
    },
    close() {
      this.treeData = []
      this.$refs.form.resetFields()
      this.$refs.tree.setCheckedKeys([])
      // checkTreeData(this.treeData, false)
    },

    /**
     * 将功能权限当作菜单加入菜单的Tree中
     * @param menuList
     * @param functionList 功能列表
     */
     initMenuFunctionTree(menuList, functionList) {
      for (let menu of menuList) {
        if (menu.list && menu.list.length > 0) {
          this.initMenuFunctionTree(menu.list, functionList)
        } else {
          for (let fun of functionList) {
            if (menu.menuId === fun.menuId) {
              if (menu.list === undefined) {
                menu.list = []
              }
              var newObj = {
                menuId: fun.menuFuncCode,
                menuTitle: fun.funName
              }
              // 去重
              if(menu.list.find((obj)=> {
                return obj.menuId === newObj.menuId
              })){} else {
                menu.list.push(newObj)
              }
            }
          }
        }
      }
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  /* flex: 1; */
  width: 300px;
  /* display: flex; */
  align-items: center;
  font-size: 14px;
  padding-right: 8px;

  .checkbox {
    float: right;
  }

  .label {
    margin-right: 20px;
  }
}
</style>
